<template>
  <div v-show="false" class="print-bill">
    <div style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'">
      <h1 style="text-align: center">{{ userStore.tenantName }}</h1>
      <h1 style="text-align: center">送货单</h1>
      <div class="info-box">
        <div class="info-item" style="flex: 2">客户名称：{{ checkData.customerName }}</div>
        <div class="info-item" style="flex: 1">联系人：{{ checkData.contactName }}</div>
        <div class="info-item" style="flex: 1">送货单号：{{ checkData.deliveryOrderCode }}</div>
      </div>
      <div class="info-box">
        <div class="info-item" style="flex: 2">地址：{{ checkData.customerAddress }}</div>
        <div class="info-item" style="flex: 1">联系电话：{{ checkData.contactPhone }}</div>
        <div class="info-item" style="flex: 1">
          日期：{{ dayjs(checkData.deliveryDate).format('YYYY年M月DD日') }}
        </div>
      </div>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr style="line-height: 35px">
          <td width="80" style="text-align: center">序号</td>
          <td width="200" style="text-align: center">名称</td>
          <td width="100" style="text-align: center">规格型号</td>
          <td width="80" style="text-align: center">单位</td>
          <td width="100" style="text-align: center">数量</td>
          <td width="100" style="text-align: center">单价</td>
          <td width="100" style="text-align: center">金额</td>
          <td width="100" style="text-align: center">销售订单</td>
          <td width="100" style="text-align: center">备注</td>
        </tr>
        <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
          <td width="80" style="text-align: center">{{ index + 1 }}</td>
          <td width="200" style="text-align: center">{{ item.materialName }}</td>
          <td width="100" style="text-align: center">{{ item.spec }}</td>
          <td width="80" style="text-align: center">{{ item.unit }}</td>
          <td width="100" style="text-align: center">{{ item.qty }}</td>
          <td width="100" style="text-align: center">{{ item.unitPrice }}</td>
          <td width="100" style="text-align: center">
            {{ `¥${formatPrice(decimalRound(item.qty! * item.unitPrice!, 4))}` }}
          </td>
          <td width="100" style="text-align: center">{{ item.orderCode }}</td>
          <td width="100" style="text-align: center">{{ item.remark }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td>大写：</td>
          <td colspan="2">{{ numberToChineseMoney(sumAmt()) }}</td>
          <td>合计：</td>
          <td colspan="5">{{ sumAmt() }}</td>
        </tr>
      </table>
      <div class="remark">注：{{ checkData.remark }}</div>
      <div class="erp-flex w100">
        <div style="flex: 1">制表人：</div>
        <div style="flex: 1">货物签收：</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { DeliveryResItem } from '@renderer/api/logisticsDep'
import { useUserStore } from '@renderer/store'
import { numberToChineseMoney } from '@renderer/utils/data-processing'
import { formatPrice, decimalRound } from '@renderer/utils/mixins'
import dayjs from 'dayjs'
import { sum } from 'lodash-es'

type Props = {
  checkData: DeliveryResItem
}
const props = withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {
      deliveryOrderId: '',
      deliveryOrderCode: '',
      customerId: '',
      customerName: '',
      deliveryDate: '',
      isInclTax: 0,
      sellersName: '',
      sellersId: '',
      transportCarNo: '',
      invoiceStatus: '',
      remark: '',
      detailList: [],
      createdBy: '',
      createdDt: '',
      updatedBy: '',
      updatedDt: '',
      fileList: [],
      deliveryMethod: '',
      contactPhone: '',
      customerAddress: '',
      contactName: ''
    }
  }
})
const userStore = useUserStore().localUserInfo

const sumAmt = () => {
  const amts = props.checkData.detailList.map((item) =>
    Number(decimalRound(item.qty! * item.unitPrice!, 4))
  )
  return sum(amts)
}

//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
@media print {
  @page {
    size: 60mm auto; /* 针式打印纸宽度，实际看你的纸大小 */
    margin: 0;
  }
  body {
    font-family: monospace;
    font-size: 12px;
    padding: 10px;
    white-space: pre; /* 保持格式 */
  }
}
.info-box {
  display: flex;
  justify-content: space-between;
  .info-item {
    flex: 1;
    line-height: 24px;
  }
}
.remark {
  height: 50px;
  display: flex;
  align-items: center;
}
table,
tr,
td {
  line-height: unset !important;
}
tr,
td {
  padding: 4px 0px;
}
</style>
